<template>
	<page-meta @resize="resize"  :root-font-size="`${pageMeta.rootFontsize}px`">
	</page-meta>
	<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
		<text>rootFontsize字体大小：{{pageMeta.rootFontsize}}</text>
		<text>oldsize字体大小：{{pageMeta.oldsize}}</text>
		<text>屏幕宽度：{{pageMeta.windowWidth}}</text>
		<text>容器宽度：{{outerLength}}</text>
		<text>数据长度：{{listLen}}</text>
		<text>需要补充的数量：{{nums}}</text>
		<text :style="`font-size: ${pageMeta.rootFontsize}px;`">rootFontsize大小的文字</text>
		<text :style="`font-size: ${pageMeta.oldsize}px;`">oldsize大小的文字</text>
		<text :style="`font-size: 1rem;`">1rem大小的文字</text>
		<button type="default" @click="addsize('jian')">减小根字体1</button>
		<button type="default" @click="addsize('jia')">增加根字体1</button>
		<!-- ,my-music-categories -->
		<unicloud-db ref="CatgoryData" style="width: 80%;" class="white-box-list" v-slot:default="{data, loading, error, options}"
			orderby="last_modify_date desc" collection="my-music-backup,my-music-categories" loadtime="auto" where="category_id._id=='61b3691f39bf100001e7ccc1'"  
			@load="handleLoad" field="_id as id,category_id._id,category_id.name,title,music_src,author,poster,last_modify_date"
			:page-size="13">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading"><text class="loading">Loading&#8230;</text></view>
			<!-- <view class="">{{data}}</view> -->
			<view  class="white-lastmusic" v-for="(item,index) in data" :key="index">
				<view class="white-lastmusic-poster" @click="playOne(item)">
					<image :src="item.poster||'../../static/imgs/poster-basic4.png'" mode=""></image>
					<view class="palyIcon ri-play-fill">
					</view>
				</view>
				{{item.category_id[0].name}}
				<view class="font-hidden">{{item.title}}</view>
				<view class="fontsize-small fontcolor-secondary">{{item.author||'佚名'}}</view>
				<view class="fontsize-small fontcolor-secondary">发行时间：
					<uni-dateformat format="yyyy-MM-dd" :date="item.last_modify_date" />
				</view>
			</view>
			<!-- <my-space-between v-if="outerLength" ref="test" :fontSize="pageMeta.rootFontsize" :outerLength="outerLength" :listLen="listLen"></my-space-between> -->
			<view v-if="outerLength" class="white-lastmusic" v-for="i in nums">{{nums}}</view>
			
		</unicloud-db>
		
	</view>
</template>

<script>
	export default {
		name:"myTest",
		props:{
		},
		data() {
			return {
				nums:0,
				outerLength:0,
				listLen:0,
				pageMeta: {
					windowWidth: '',
					rootFontsize: 0,
					oldsize:''
				},
			}
		},
		mounted() { //完成模板渲染后首次赋值
			this.pageMeta.windowWidth = uni.getSystemInfoSync().windowWidth
			this.pageMeta.rootFontsize = (this.pageMeta.windowWidth / 375) * 10 
			this.pageMeta.oldsize = (this.pageMeta.windowWidth / 375) * 10 
			this.outerLength=this.$refs.CatgoryData.$el.clientWidth
			
			
		},
		watch: {//观察rootFontsize的变化，限制了最大16px后屏幕再大也不缩放了
			'pageMeta.rootFontsize'(e) {
				e > 16 ? this.pageMeta.rootFontsize = 16 : ''
				
			},
			'pageMeta.windowWidth'(e) {
				this.outerLength=this.$refs.CatgoryData.$el.clientWidth
				this.reCalcPaddingLength()
			}
			
		},
		methods:{
			handleLoad(e){
				console.log(e.length)
				this.listLen=e.length
				this.outerLength=this.$refs.CatgoryData.$el.clientWidth
				this.reCalcPaddingLength()
			},
			// uni自带的resize处理方法
			resize(e) {
				this.pageMeta.windowWidth = e.size.windowWidth;
				this.pageMeta.rootFontsize = (e.size.windowWidth / 375) * 10 
				this.pageMeta.oldsize = (this.pageMeta.windowWidth / 375) * 10 
				this.reCalcPaddingLength()
				this.$emit('attr', this.pageMeta); // 调用父组件传递过来的方法，同时把数据传递出
			    
			},
			reCalcPaddingLength() {
				if (this.pageMeta.rootFontsize) {
					// let listLen=20      //子元素的数量
					// let outLength=1000   //容器的宽度
					let inLength = this.pageMeta.rootFontsize*10  //每个元素的宽度
					let lineCapacity = Math.floor(this.outerLength / inLength) // 计算每行放几个
					let paddingLength = Math.floor(this.listLen / lineCapacity) // 计算可以放几行
					let nums=lineCapacity-(this.listLen-(lineCapacity*paddingLength))
					if(lineCapacity==nums)
					{
						nums=0
					}
					this.nums=nums
				}
			
			},
			addsize(e){
				e=='jia'? this.pageMeta.rootFontsize+=1:this.pageMeta.rootFontsize-=1
			}
		}
	}
</script>

<style>

</style>
